<template>
  <div>
    <ul class="page-list">
      <li @click="changePage(1)">
        <i class="iconfont">&#xe651;</i>
      </li>
      <!-- <template v-for="(item,index) in temp_page" :key="index">
        <li
          :key="item"
          :class="item == current_page ? 'page-active' : ''"
          @click="change(item)"
        >{{item}}</li>
        <li
          v-if=" index == 3 && last_page > 5 && temp_page[0] < last_page - 5"
          @click="pageMore()"
        >...</li>
      </template> -->
      <div v-for="(item,index) in temp_page" :key = "index" class="ym">
        <li
          :key="item"
          :class="item == current_page ? 'page-active' : ''"
          @click="change(item)"
        >{{item}}</li>
         <li
          v-if=" index == 3 && last_page > 5 && temp_page[0] < last_page - 5"
          @click="pageMore()"
        >...</li>
      </div>
      <li @click="changePage(2)">
        <i class="iconfont">&#xe637;</i>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: { page: {}, last: {} },
  data() {
    return {
      current_page: 1,
      last_page: 10,
      temp_page: [],
      start_page: 0
    };
  },
  mounted() {
    this.getPageArr(1);
    this.current_page = this.page;
    this.last_page = this.last;
  },
  methods: {
    //设置页码数组
    getPageArr(page) {
      this.temp_page = [];
      var start = 1;
      var end = 10;
      var len = this.last_page - page;
      if (this.last_page > 5 && len > 3) {
        if (page > 3) {
          start = page - 2;
          end = page + 3;
        }
      }
      if (this.last_page > 5 && len <= 3) {
        if (page > 3) {
          end = page + len;
          start = page - 5 + len;
        }
      }
      if (this.last_page < 5) {
        end = this.last_page;
      }
      for (var i = start; i <= end; i++) {
        this.temp_page.push(i);
      }
      if (end <= this.last_page - 1) {
        this.temp_page[5] = this.last_page;
        this.temp_page[4] = this.last_page - 1;
      }
    },
    //更多页码
    pageMore() {},
    //选择页码
    change(item) {
      if (item == this.current_page) return false;
      this.current_page = item;
      this.$emit("change", item);
    },
    //增减页码
    changePage(param) {
      if (param == 1) {
        if (this.current_page <= 1) return false;
        this.current_page--;
      } else {
        if (this.current_page >= this.last_page) return false;
        this.current_page++;
      }
      this.$emit("change", this.current_page);
    }
  }
  // watch: {
  //   current_page(o, v) {
  //     this.getPageArr(o)
  //   },
  //   last_page(o, v) {
  //     this.getPageArr(this.current_page)
  //   }
  // }
};
</script>

<style>
.page-list {
  display: inline-block;
  height: 30px;
  margin: auto;
  overflow: hidden;
  user-select: none;
  display: flex;
}
.page-list > li {
  float: left;
  width: 60px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  color: #999;
  transition: all 0.1s linear;
}
.page-list > li.page-active {
  color: #333;
  font-size: 18px;
}
.page-list > li i {
  font-size: 16px;
}
.ym {
  display: flex;
  align-items: center;
  margin:  0 10px;

}
.ym > li {
  font-size: 18px;
  color: #666;
}
</style>